const tbody = document.querySelector('tbody');

getScoreList()



tbody.addEventListener('dblclick',function(e){
    if(e.target.nodeName==='TD' && e.target.classList.contains('score')){

        const input = e.target.querySelector('input')
        input.style.display = 'block'

        input.value = e.target.innerText

        input.focus()




    }
})



function getScoreList(){
    axios.get('/score/list')
.then(result=>{
    console.log(result);

    if(result.data.code===0){
        const obj = result.data.data

    let html = ''

    for (const key in obj) {
    //     html+=`
    //     <tr>
    //     <th scope="row">${key}</th>
    //     <td>${obj[key].name}</td>
    //     <td class="score">${obj[key].score[0]}</td>
    //     <td class="score">${obj[key].score[1]}</td>
    //     <td class="score">${obj[key].score[2]}</td>
    //     <td class="score">${obj[key].score[3]}</td>
    //     <td class="score">${obj[key].score[4]}</td>
    //   </tr>`

           html+=`<tr>
               <th scope="row">${key}</th>
                <td>${obj[key].name}</td>`;

            const objhtml = obj[key].score.reduce((h,v,i)=>{
                return h+`
                <td class="score">${v}<input type='text' data-batch='${i+1}' data-id='${key}' /></td>
                `
            },'')    

           html+=objhtml+`</tr>`
           
           

    }

    tbody.innerHTML = html

    const inputs = document.querySelectorAll('tbody input');

    inputs.forEach(v=>v.addEventListener('blur',function () {

        const data = {

            stu_id: v.dataset.id, 
 
            batch: v.dataset.batch, 
             
            score: v.value,
        }

        axios.post('/score/entry',data)
        .then(result=>{
            if(result.data.code===0){
                toastr.success(result.data.message)

                getScoreList()
            }
        })
    }))


    }

   
})
}